<template>
    <swiper :indicator-dots="false" :autoplay="false" circular="true" :displayMultipleItems="displayCount" class="swiper-recommend"  :current="current">
        <swiper-item v-for="(item, index) in list" :key="index" @click="onClick(index)" :class="{active:current===index}">
            <view class="title">{{item}}</view>
            <view v-if="current===index" class="text"></view>
        </swiper-item>
    </swiper>
</template>

<script>
    export default {
        name: "swiper-recommend",
        props: {
            list: {
                default: ()=>['精选','生活','电器','服饰','超市']
            },
            current:{
                default:0
            },
            displayCount:{
                default:5
            }
        },
        methods: {
            onClick(index) {
                this.$emit('onClick',index);
            },
        }
    }
</script>

<style lang="scss">
    .swiper-recommend{
        height: 48px;
        padding: 16px 0;
        uni-swiper-item{
            text-align: center;
            color: #fff;
            .title{
                font-size: 32px;
                line-height: 32px;
                margin-bottom: 8px;
            }
            .text{
                width: 48px;
                height: 8px;
                border-radius: 4px;
                display: block;
                background-color: white;
                margin: 0 auto;
            }
        }
    }

</style>
